import React from "react"
import ReactDOM from "react-dom"
import classNames from 'classnames'
require('./Loading.less')

class Loading extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            show: this.props.show,
            text: this.props.text
        }
    }
    clickMask(e){
        e.stopPropagation()
    }
    componentWillReceiveProps(newProps){
        this.setState({
            show: newProps.show,
            text: newProps.text
        })
    }
    makeContent() {
        const {text} = this.state
        const cls = "lux-new"
        const icon = "weui-loading weui-icon_toast"
        return (
            <div>
                <div className="weui-mask_transparent" onClick={this.clickMask.bind(this)}></div>
                <div className={classNames("weui-toast", cls)}>
                    <i className={icon}></i>
                    <p className="weui-toast__content">{text || "加载中..."}</p>
                </div>
            </div>
        )
    }
    render() {
        const {show} = this.state
        let content = show ? this.makeContent() : null
        return (
            <div className="Dialog">
                {content}
            </div>
        )
    }
}

module.exports = Loading